<template>
	<div>
		<el-collapse v-model="activeNames">
			<div v-for="(item,index) in questionList" :key="index">
				<el-collapse-item :name="`${index+1}`">
					<template slot="title">
						<div class="header-title">{{ item.questionTypeName }}：共<span class="count">{{ item.errorNum }}</span>题</div>
					</template>
					<div class="question-content" v-for="(question) in item.questionTypeDataList" :key="question.questionSeq">
						<question-show
							:data="question"
						>
							<template #seq="{ type, childrenIndex }">
								<div
									v-if="type === 'children'"
									class="question-seq"
								>
									{{ question.index }}{{ '.' + (childrenIndex + 1) }}
								</div>
								<div v-else class="question-seq">{{ question.index }}、</div>
							</template>
						</question-show>
					</div>
				</el-collapse-item>
			</div>
		</el-collapse>
	</div>
</template>
<script>
import QuestionShow from "../../../../components/question-base/question-show/index.vue";
export default {
    name:'error-view',
    components:{
        QuestionShow
    },
    props:{
        questionList:{
            type:Array,
            default:()=>[]
        }
    },
    data(){
        return{
            activeNames:[],
            errorList:[]
        };
    },
    watch:{
        questionList:{
            handler(newVal){
                let _indexArray = [];
                for (let index = 0; index < newVal.length; index++) {
                    _indexArray.push(`${index + 1}`);
                };
                this.activeNames = _indexArray;
            },
            deep:true,
            immediate:true
        }
    }
};
</script>
<style scoped lang="less">
.header-title{
    background-color: rgb(242 242 242);
    flex: 1;
    cursor: pointer;
    .count{
        margin: 0 4px;
    }
}
.question-content{
    padding:  10px 25px;
    /deep/ .question-seq{
    flex-shrink: 0;
}
}
/deep/ .el-collapse{
    border: none;
    .el-collapse-item__header{
        flex-direction: row-reverse;
        background-color: rgb(242 242 242);
    }
    .el-collapse-item__arrow{
        display: block;
        margin-left: 5px;
    }
}

</style>
